<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行政区域数据维护</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            padding: 20px;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            background: linear-gradient(to right, #f8f9fa, #ffffff);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .title-section {
            flex: 1;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 16px;
        }
        
        .action-section {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: #3498db;
            color: white;
            box-shadow: 0 2px 5px rgba(52, 152, 219, 0.2);
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
        }
        
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .filter-section:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .filter-row {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }
        
        .filter-item {
            flex: 1;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
            font-weight: 500;
        }
        
        .filter-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .filter-input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }
        
        .region-table {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .region-table:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 14px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            background-color: #f8f9fa;
            color: #2c3e50;
            font-weight: 500;
            position: relative;
        }
        
        th:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #e0e0e0;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .status-badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            display: inline-block;
        }
        
        .status-active {
            background-color: #e8f6ed;
            color: #2ecc71;
        }
        
        .status-inactive {
            background-color: #fee7e7;
            color: #e74c3c;
        }
        
        .action-btn {
            padding: 6px 12px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-size: 13px;
            margin-right: 6px;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .btn-view {
            background-color: #f8f9fa;
            color: #3498db;
            border: 1px solid #e6e9ed;
        }
        
        .btn-view:hover {
            background-color: #eef6fc;
            color: #2980b9;
        }
        
        .btn-edit {
            background-color: #3498db;
            color: white;
        }
        
        .btn-edit:hover {
            background-color: #2980b9;
        }
        
        .action-btn i {
            margin-right: 4px;
            font-size: 12px;
        }
        
        .pagination {
            margin-top: 25px;
            display: flex;
            justify-content: center;
            gap: 5px;
        }
        
        .page-item {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            background: white;
            transition: all 0.3s ease;
        }
        
        .page-item:hover {
            background: #f5f5f5;
        }
        
        .page-item.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
            box-shadow: 0 2px 5px rgba(52, 152, 219, 0.2);
        }
        
        /* 增加动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        tbody tr {
            animation: fadeIn 0.3s ease-out forwards;
        }
        
        tbody tr:nth-child(1) { animation-delay: 0.05s; }
        tbody tr:nth-child(2) { animation-delay: 0.1s; }
        tbody tr:nth-child(3) { animation-delay: 0.15s; }
        tbody tr:nth-child(4) { animation-delay: 0.2s; }
        tbody tr:nth-child(5) { animation-delay: 0.25s; }
        
        /* 响应式设计增强 */
        @media (max-width: 768px) {
            .filter-row {
                flex-direction: column;
                gap: 12px;
            }
            
            .action-section {
                margin-top: 15px;
            }
            
            header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .region-table {
                overflow-x: auto;
            }
            
            .action-buttons {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            
            .action-btn {
                margin-right: 0;
                width: 100%;
            }
        }
        
        /* 空状态样式 */
        .empty-state {
            padding: 40px 20px;
            text-align: center;
            color: #8c9396;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #d1d5db;
        }
        
        .empty-state-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #677280;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1><i class="fas fa-map-marked-alt"></i> 行政区域数据维护</h1>
                <p class="subtitle">管理和维护行政区域层级数据</p>
            </div>
            <div class="action-section">
                <button class="btn btn-primary" onclick="location.href='region-detail.html'">
                    <i class="fas fa-plus"></i> 新增区域
                </button>
            </div>
        </header>
        
        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-item">
                    <label class="filter-label">区域层级</label>
                    <select class="filter-input" id="levelFilter">
                        <option value="">全部</option>
                        <option value="province">省份</option>
                        <option value="city">城市</option>
                        <option value="district">区县</option>
                        <option value="street">街道</option>
                        <option value="committee">委员会</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label class="filter-label">区域名称</label>
                    <input type="text" class="filter-input" id="nameFilter" placeholder="输入区域名称搜索">
                </div>
                <div class="filter-item">
                    <label class="filter-label">状态</label>
                    <select class="filter-input" id="statusFilter">
                        <option value="">全部</option>
                        <option value="active">启用</option>
                        <option value="inactive">停用</option>
                    </select>
                </div>
            </div>
            <div class="filter-row">
                <div class="filter-item">
                    <button class="btn btn-primary" onclick="applyFilters()">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </div>
            </div>
        </div>
        
        <div class="region-table">
            <table>
                <thead>
                    <tr>
                        <th width="60">序号</th>
                        <th width="120">区域编码</th>
                        <th>区域名称</th>
                        <th width="100">区域层级</th>
                        <th>上级区域</th>
                        <th width="100">排序号</th>
                        <th width="80">状态</th>
                        <th width="150">操作</th>
                    </tr>
                </thead>
                <tbody id="regionTableBody">
                    <!-- 数据行将通过JavaScript动态生成 -->
                </tbody>
            </table>
            
            <!-- 空状态显示 -->
            <div class="empty-state" id="emptyState" style="display:none;">
                <i class="fas fa-map-marked-alt"></i>
                <p class="empty-state-title">暂无区域数据</p>
                <p>您可以添加新的区域数据或调整筛选条件</p>
            </div>
        </div>
        
        <div class="pagination">
            <span class="page-item active">1</span>
            <span class="page-item">2</span>
            <span class="page-item">3</span>
            <span class="page-item">...</span>
            <span class="page-item">10</span>
        </div>
    </div>

    <script>
        // 模拟区域数据
        const regionData = [
            {
                id: 1,
                code: '370000',
                name: '山东省',
                level: 'province',
                levelName: '省份',
                parent: '-',
                sortOrder: 1,
                status: 'active'
            },
            {
                id: 2,
                code: '370100',
                name: '济南市',
                level: 'city',
                levelName: '城市',
                parent: '山东省',
                sortOrder: 1,
                status: 'active'
            },
            {
                id: 3,
                code: '370102',
                name: '历下区',
                level: 'district',
                levelName: '区县',
                parent: '济南市',
                sortOrder: 1,
                status: 'active'
            },
            {
                id: 4,
                code: '370102001',
                name: '解放路街道',
                level: 'street',
                levelName: '街道',
                parent: '历下区',
                sortOrder: 1,
                status: 'active'
            },
            {
                id: 5,
                code: '370102001001',
                name: '文化东路社区',
                level: 'committee',
                levelName: '委员会',
                parent: '解放路街道',
                sortOrder: 1,
                status: 'active'
            }
        ];

        // 渲染区域表格
        function renderRegionTable(data) {
            const tbody = document.getElementById('regionTableBody');
            const emptyState = document.getElementById('emptyState');
            tbody.innerHTML = '';
            
            if (data.length === 0) {
                emptyState.style.display = 'block';
                return;
            }
            
            emptyState.style.display = 'none';
            
            data.forEach((region, index) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${index + 1}</td>
                    <td>${region.code}</td>
                    <td>${region.name}</td>
                    <td>${region.levelName}</td>
                    <td>${region.parent}</td>
                    <td>${region.sortOrder}</td>
                    <td>
                        <span class="status-badge status-${region.status}">
                            ${region.status === 'active' ? '启用' : '停用'}
                        </span>
                    </td>
                    <td>
                        <div class="action-buttons">
                            <button class="action-btn btn-view" onclick="viewRegion(${region.id})">
                                <i class="fas fa-eye"></i> 查看
                            </button>
                            <button class="action-btn btn-edit" onclick="editRegion(${region.id})">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        // 应用筛选
        function applyFilters() {
            const level = document.getElementById('levelFilter').value;
            const name = document.getElementById('nameFilter').value.toLowerCase();
            const status = document.getElementById('statusFilter').value;
            
            const filteredData = regionData.filter(region => {
                if (level && region.level !== level) return false;
                if (name && !region.name.toLowerCase().includes(name)) return false;
                if (status && region.status !== status) return false;
                return true;
            });
            
            renderRegionTable(filteredData);
        }

        // 查看区域详情
        function viewRegion(id) {
            window.location.href = `region-detail.html?id=${id}&mode=view`;
        }

        // 编辑区域
        function editRegion(id) {
            window.location.href = `region-detail.html?id=${id}&mode=edit`;
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            renderRegionTable(regionData);
            
            // 为分页添加点击事件
            document.querySelector('.pagination').addEventListener('click', function(e) {
                if (e.target.classList.contains('page-item')) {
                    const items = document.querySelectorAll('.page-item');
                    items.forEach(item => item.classList.remove('active'));
                    e.target.classList.add('active');
                    // 实际项目中，这里应该根据页码重新加载数据
                }
            });
        });
    </script>
</body>
</html> 